<template>
    <view class="tabs">
        <view class="dayItem">
            <view :class="curIndex == 0 ? 'tabItem' : 'tabItem2'" @click="onTabClick(0)"> {{dateTxt}}</view>
            <view class="arrow-down" @click="onSelectDateClick"></view>
        </view>

        <view :class="curIndex == 1 ? 'tabItem' : 'tabItem2'" @click="onTabClick(1)">月订单</view>
    </view>
</template>

<script setup lang="ts">
import {ref} from "vue";

let props = defineProps(["dateTxt"])
let emits = defineEmits(["tabChange","selectDate"])
let curIndex = ref(0)

/**
 * tab 点击事件
 * @param index
 */
function onTabClick(index: number) {
    curIndex.value = index
    emits("tabChange", index)
}

function onSelectDateClick() {
    emits("selectDate")
}
</script>

<style scoped lang="scss">
.tabs {
    display: flex;
    align-items: center;
    margin: 20rpx 0;
    font-weight: bold;
    font-size: 26rpx;
    color: #3D3D3D;
    letter-spacing: 1rpx;
}

.dayItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 100rpx;
}

.tabItem {
    margin-right: 100rpx;
}

.tabItem::after {
    content: "";
    display: block;
    height: 8rpx;
    width: 65%;
    background-color: #FF0000;
    margin: 16rpx auto 0;
}

.tabItem2 {
    margin-right: 100rpx;
}

.tabItem2::after {
    content: "";
    display: block;
    height: 8rpx;
    width: 65%;
    background-color: transparent;
    margin: 16rpx auto 0;
}

.arrow-down {
    margin-left: -90rpx;
    margin-bottom: 14rpx;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid #333333;
    display: inline-block;
}
</style>